<template>
  <div class="member">
    <div class="member-header">
      <div class="left">会员等级规则</div>

      <div class="right" @click="addHit">新增</div>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="" label="会员图标">
          <template slot-scope="scope">
            <img class="table-imgs" :src="scope.row.icon" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="userVipName" label="会员名称"> </el-table-column>
        <el-table-column prop="doorsill" label="升级门槛（元）">
        </el-table-column>
        <el-table-column prop="discountsRate" label="会员折扣（%）">
        </el-table-column>
        <el-table-column prop="divideRate" label="股东分成（%）">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="editHit(scope.row)">编辑</div>

              <div class="list" @click.prevent="deleteHit(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
        </el-pagination>
      </div>
    </div>

    <!--新增弹出框-->
    <div class="add">
      <el-dialog :title="addRoaid == 0 ? '新增' : '编辑'" :visible.sync="addVisible" :before-close="addClose" width="30%">
        <div class="add-form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="会员图标" prop="icon">
              <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <div class="img">
                  <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item label="会员名称" prop="userVipName">
              <el-input v-model="ruleForm.userVipName" placeholder="请输入会员名称" clearable></el-input>
            </el-form-item>

            <el-form-item label="升级门槛（元）" prop="doorsill">
              <el-input v-model="ruleForm.doorsill" placeholder="请输入升级门槛（元）" clearable></el-input>
            </el-form-item>

            <el-form-item label="会员折扣（%）" prop="discountsRate">
              <el-input v-model="ruleForm.discountsRate" placeholder="请输入会员折扣（%）" clearable></el-input>
            </el-form-item>

            <el-form-item label="股东分成（%）" prop="divideRate">
              <el-input v-model="ruleForm.divideRate" placeholder="请输入股东分成（%）" clearable></el-input>
            </el-form-item>

            <el-form-item class="attachment">
              <div class="list" @click="addClose">取消</div>
              <div class="list" @click="addConfirm('ruleForm')">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog title="删除" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import WangEdit from "@/components/wangEditor/RichTextEditor.vue";

import {
  menberRuleList,
  menberRuleListAdd,
  menberRuleListDelete,
} from "@/api/menber";

var throttle = require("@/utils/throttle"); // 防抖

export default {
  components: {
    WangEdit,
  },

  data() {
    return {
      tableData: [],
      tableDataTotal: 0,
      loading: false,
      commonObj: {},
      //--------
      addRoaid: 0,
      addVisible: false,
      ruleForm: {
        icon: "",
        userVipName: "",
        doorsill: "",
        discountsRate: "",
        divideRate: "",
      },
      rules: {
        icon: [{ required: true, message: "请上传图标", trigger: "blur" }],
        userVipName: [
          { required: true, message: "请输入会员名称", trigger: "blur" },
        ],
        doorsill: [
          { required: true, message: "请输入升级门槛（元）", trigger: "blur" },
        ],
        discountsRate: [
          { required: true, message: "请输入会员折扣（%）", trigger: "blur" },
        ],
        divideRate: [
          { required: true, message: "请输入股东分成（%）", trigger: "blur" },
        ],
      },
      //-------------
      deleteVisible: false,
      //----------
      editortext: "",
      //-----------
      editShow: false,
      editorParams: {
        content: "", // 富文本内容
        placeholder: "请填写内容", // 富文本占位内容
        uploadImageUrl: "/file", // 富文本上传图片的地址
        height: "400px", // 富文本最小高度
        isDisabled: false, // 富文本是否禁用
      },
    };
  },
  created() {
    this.editShow = true;
    this.loading = true;
    this.menberRuleListMet();
  },
  methods: {
    menberRuleListMet() {
      let params = {};

      menberRuleList(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.forEach((item, index) => {
            item.doorsill = Number(item.doorsill / 100);
          });

          this.tableData = res.resultData;
          this.tableDataTotal = res.resultData.length;
          this.loading = false;
        }
      });
    },

    //------------
    editHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.addRoaid = 1;
      this.commonObj = item;
      this.ruleForm.icon = item.icon;
      this.ruleForm.userVipName = item.userVipName;
      this.ruleForm.doorsill = item.doorsill;
      this.ruleForm.discountsRate = item.discountsRate;
      this.ruleForm.divideRate = item.divideRate;

      this.addVisible = true;
    },
    //------------
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.userVipId;

      menberRuleListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("删除成功！");
          this.loading = true;
          this.menberRuleListMet();
        }
      });
    },

    //------
    addHit() {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.addRoaid = 0;
      this.ruleForm.icon = "";
      this.ruleForm.userVipName = "";
      this.ruleForm.doorsill = "";
      this.ruleForm.discountsRate = "";
      this.ruleForm.divideRate = "";

      this.addVisible = true;
    },

    addClose() {
      this.ruleForm.icon = "";
      this.ruleForm.userVipName = "";
      this.ruleForm.doorsill = "";
      this.ruleForm.discountsRate = "";
      this.ruleForm.divideRate = "";

      this.addVisible = false;
    },
    addConfirm: throttle.throttle(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            userVipId: this.addRoaid == 0 ? "" : this.commonObj.userVipId,
            icon: this.ruleForm.icon,
            userVipName: this.ruleForm.userVipName,
            doorsill: Number(this.ruleForm.doorsill * 100),
            discountsRate: this.ruleForm.discountsRate,
            divideRate: this.ruleForm.divideRate,
          };
          menberRuleListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.addRoaid == 0) {
                this.$message.success("新增会员等级成功！");
              } else {
                this.$message.success("编辑会员等级成功！");
              }
              this.loading = true;
              this.menberRuleListMet();
              this.addVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
    //-----------------
    //---------上传
    handleAvatarSuccess(res, file) {
      this.ruleForm.icon = res.resultData;
    },
    //---------
    handleSizeChange(val) {
      this.loading = true;
      this.menberRuleListMet();
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.menberRuleListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
@import url("@/assets/css/delete.less");

.member {
  .member-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 10px;
    margin-bottom: 20px;

    .left {
      font-size: 17px;
      font-weight: 600;
    }

    .right {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  .table {
    .table-imgs {
      width: 124px;
      height: 70px;
    }
  }





  .add {
    /deep/ .el-dialog__header {
      font-size: 16px;
      text-align: center;
    }

    /deep/ .el-dialog__body {
      padding-bottom: 10px;
    }

    .img {
      width: 124px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ccc;
      border-radius: 5px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }

    .add-form {
      /deep/ .el-select {
        width: 100%;
      }

      .attachment {
        margin-top: 50px;

        /deep/ .el-form-item {
          margin-bottom: 0;
        }

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 50px;
          border-radius: 5px;
          width: 100px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>